<template>
    <div class="app-container">
        <el-row :gutter="15">
            <el-col style="margin-bottom: 10px">
                <el-card class="box-card" shadow="never">
                    <div slot="header" class="clearfix">
                        <span class="role-span">字段配置：{{ tableName }}</span>
                        <el-button :loading="genLoading" icon="el-icon-s-promotion" size="mini" style="float: right; padding: 6px 9px" type="success" @click="toGen">保存&生成</el-button>
                        <el-button :loading="columnLoading" icon="el-icon-check" size="mini" style="float: right; padding: 6px 9px; margin-right: 9px" type="primary" @click="saveColumnConfig">保存</el-button>
                        <el-tooltip class="item" effect="dark" content="数据库中表字段变动时使用该功能" placement="top-start">
                            <el-button :loading="syncLoading" icon="el-icon-refresh" size="mini" style="float: right; padding: 6px 9px" type="info" @click="sync">同步</el-button>
                        </el-tooltip>
                    </div>
                    <el-form size="small" label-width="90px">
                        <el-table v-loading="loading" :data="data" :max-height="tableHeight" size="small" style="width: 100%; margin-bottom: 15px">
                            <el-table-column prop="columnName" label="字段名称" />
                            <el-table-column prop="columnType" label="字段类型" />
                            <el-table-column prop="remark" label="字段描述">
                                <template slot-scope="scope">
                                    <el-input v-model="data[scope.$index].remark" size="mini" class="edit-input" />
                                </template>
                            </el-table-column>
                            <el-table-column align="center" label="必填" width="70px">
                                <template slot-scope="scope">
                                    <el-checkbox v-model="data[scope.$index].notNull" />
                                </template>
                            </el-table-column>
                            <el-table-column align="center" label="列表" width="70px">
                                <template slot-scope="scope">
                                    <el-checkbox v-model="data[scope.$index].listShow" />
                                </template>
                            </el-table-column>
                            <el-table-column align="center" label="表单" width="70px">
                                <template slot-scope="scope">
                                    <el-checkbox v-model="data[scope.$index].formShow" />
                                </template>
                            </el-table-column>
                            <el-table-column label="表单类型">
                                <template slot-scope="scope">
                                    <el-select v-model="data[scope.$index].formType" filterable class="edit-input" clearable size="mini" placeholder="请选择">
                                        <el-option label="文本框" value="Input" />
                                        <el-option label="文本域" value="Textarea" />
                                        <el-option label="单选框" value="Radio" />
                                        <el-option label="下拉框" value="Select" />
                                        <el-option label="日期框" value="Date" />
                                        <el-option label="图片框" value="Picture" />
                                    </el-select>
                                </template>
                            </el-table-column>
                            <el-table-column label="查询方式">
                                <template slot-scope="scope">
                                    <el-select v-model="data[scope.$index].queryType" filterable class="edit-input" clearable size="mini" placeholder="请选择">
                                        <el-option label="=" value="=" />
                                        <el-option label="!=" value="!=" />
                                        <el-option label=">=" value=">=" />
                                        <el-option label="<=" value="<=" />
                                        <el-option label="Like" value="Like" />
                                        <el-option label="NotNull" value="NotNull" />
                                        <el-option label="BetWeen" value="BetWeen" />
                                    </el-select>
                                </template>
                            </el-table-column>
                            <el-table-column label="日期注解">
                                <template slot-scope="scope">
                                    <el-select v-model="data[scope.$index].dateAnnotation" filterable class="edit-input" clearable size="mini" placeholder="请选择">
                                        <el-option label="自动创建时间" value="CreationTimestamp" />
                                        <el-option label="自动更新时间" value="UpdateTimestamp" />
                                    </el-select>
                                </template>
                            </el-table-column>
                            <el-table-column label="关联字典">
                                <template slot-scope="scope">
                                    <el-select v-model="data[scope.$index].dictName" filterable class="edit-input" clearable size="mini" placeholder="请选择">
                                        <el-option v-for="item in dicts" :key="item.id" :label="item.remark === '' ? item.name : item.remark" :value="item.name" />
                                    </el-select>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作">
                                <template slot-scope="scope">
                                    <el-button v-if="scope.row.columnName === 'id'" type="info" size="mini" round>默认</el-button>
                                    <div v-else>
                                        <el-button size="mini" :disabled="scope.$index === 0" @click="moveUp(scope.$index, scope.row)"><i class="el-icon-arrow-up" /></el-button>
                                        <el-button size="mini" :disabled="scope.$index === data.length - 1" @click="moveDown(scope.$index, scope.row)"><i class="el-icon-arrow-down" /></el-button>
                                        <el-button size="mini" :disabled="scope.$index === data.length - 1" @click="moveDownLast(scope.$index, scope.row)"><i class="el-icon-download" /></el-button>
                                    </div>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-form>
                </el-card>
            </el-col>
            <el-col>
                <el-card class="box-card" shadow="never">
                    <div slot="header" class="clearfix">
                        <span class="role-span">生成配置</span>
                        <el-button :loading="configLoading" icon="el-icon-check" size="mini" style="float: right; padding: 6px 9px" type="primary" @click="doSubmit">保存</el-button>
                    </div>
                    <el-form ref="form" :model="form" :rules="rules" size="small" label-width="140px">
                        <el-form-item label="作者名称" prop="author">
                            <el-input v-model="form.author" style="width: 40%" />
                            <span style="color: #c0c0c0; margin-left: 10px">类上面的作者名称</span>
                        </el-form-item>
                        <el-form-item label="后端模块工程绝对路径" prop="moduleName">
                            <el-input v-model="form.moduleName" style="width: 40%" />
                            <span style="color: #c0c0c0; margin-left: 10px">请选择后端项目中已存在模块的绝对路径</span>
                        </el-form-item>
                        <el-form-item label="包名称" prop="pack">
                            <el-input v-model="form.pack" style="width: 40%" />
                            <span style="color: #c0c0c0; margin-left: 10px">项目包的名称，生成的代码放到哪个包里面，如com.xxx.xxx</span>
                        </el-form-item>
                        <el-form-item label="接口名称" prop="apiAlias">
                            <el-input v-model="form.apiAlias" style="width: 40%" />
                            <span style="color: #c0c0c0; margin-left: 10px">接口的名称，用于控制器与接口文档中</span>
                        </el-form-item>
                        <el-form-item label="view目录绝对路径" prop="path">
                            <el-input v-model="form.path" style="width: 40%" />
                            <span style="color: #c0c0c0; margin-left: 10px">输入views文件夹下的目录绝对路径，不存在则创建</span>
                        </el-form-item>
                        <el-form-item label="API目录绝对路径">
                            <el-input v-model="form.apiPath" style="width: 40%" />
                            <span style="color: #c0c0c0; margin-left: 10px">前端Api存放绝对路径，为空则自动生成在api根路径下</span>
                        </el-form-item>
                        <el-form-item label="去表前缀" prop="prefix">
                            <el-input v-model="form.prefix" placeholder="默认不去除表前缀" style="width: 40%" />
                            <span style="color: #c0c0c0; margin-left: 10px">默认不去除表前缀，可自定义</span>
                        </el-form-item>
                        <el-form-item label="是否覆盖" prop="cover">
                            <el-radio-group v-model="form.cover" size="mini" style="width: 40%">
                                <el-radio-button label="true">是</el-radio-button>
                                <el-radio-button label="false">否</el-radio-button>
                            </el-radio-group>
                            <span style="color: #c0c0c0; margin-left: 10px">谨防误操作，请慎重选择</span>
                        </el-form-item>
                    </el-form>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import crud from '@/mixins/crud'
import { update, get } from '@/api/generator/genConfig'
import { save, sync, generator } from '@/api/generator/generator'
import { getDicts } from '@/api/system/dict'
export default {
  name: 'GeneratorConfig',
  components: {},
  mixins: [crud],
  data() {
    return {
      activeName: 'first',
      tableName: '',
      tableHeight: 550,
      columnLoading: false,
      configLoading: false,
      dicts: [],
      syncLoading: false,
      genLoading: false,
      form: {
        id: null,
        tableName: '',
        author: '',
        pack: '',
        path: '',
        moduleName: '',
        cover: 'false',
        apiPath: '',
        prefix: '',
        apiAlias: null
      },
      rules: {
        author: [{ required: true, message: '作者不能为空', trigger: 'blur' }],
        pack: [{ required: true, message: '包路径不能为空', trigger: 'blur' }],
        moduleName: [{ required: true, message: '包路径不能为空', trigger: 'blur' }],
        path: [{ required: true, message: '前端路径不能为空', trigger: 'blur' }],
        apiAlias: [{ required: true, message: '接口名称不能为空', trigger: 'blur' }],
        cover: [{ required: true, message: '不能为空', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.tableHeight = document.documentElement.clientHeight - 385
    this.tableName = this.$route.params.tableName
    this.$nextTick(() => {
      this.init()
      get(this.tableName).then(data => {
        this.form = data
        this.form.cover = this.form.cover.toString()
      })
      getDicts().then(data => {
        this.dicts = data
      })
    })
  },
  methods: {
    beforeInit() {
      this.url = 'api/generator/columns'
      const tableName = this.tableName
      this.params = { tableName }
      return true
    },
    saveColumnConfig() {
      this.columnLoading = true
      save(this.data)
        .then(res => {
          this.notify('保存成功', 'success')
          this.columnLoading = false
        })
        .catch(err => {
          this.columnLoading = false
          console.log(err.response.data.message)
        })
    },
    doSubmit() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.configLoading = true
          update(this.form)
            .then(res => {
              this.notify('保存成功', 'success')
              this.form = res
              this.form.cover = this.form.cover.toString()
              this.configLoading = false
            })
            .catch(err => {
              this.configLoading = false
              console.log(err.response.data.message)
            })
        }
      })
    },
    sync() {
      this.syncLoading = true
      sync([this.tableName])
        .then(() => {
          this.init()
          this.notify('同步成功', 'success')
          this.syncLoading = false
        })
        .then(() => {
          this.syncLoading = false
        })
    },
    toGen() {
      this.genLoading = true
      save(this.data)
        .then(res => {
          this.notify('保存成功', 'success')
          // 生成代码
          generator(this.tableName, 0)
            .then(data => {
              this.genLoading = false
              this.notify('生成成功', 'success')
            })
            .catch(err => {
              this.genLoading = false
              console.log(err.response.data.message)
            })
        })
        .catch(err => {
          this.genLoading = false
          console.log(err.response.data.message)
        })
    },
    // 上移
    moveUp(index, row) {
      var that = this
      console.log('上移', index, row)
      console.log(this.data[index])
      if (index > 0) {
        // const upDate = this.data[index - 1]
        // this.data.splice(index - 1, 1)
        // this.data.splice(index, 0, upDate)
        const currentRow = this.data[index]
        const nextRow = this.data[index - 1]

        for (const key in nextRow) {
          // key 属性名
          if (key !== 'id') {
            const v = nextRow[key] // value 属性值
            nextRow[key] = currentRow[key]
            currentRow[key] = v // 设置结果
          }
        }
      } else {
        alert('已经是第一条，不可上移')
      }
    },

    // 下移
    moveDown(index, row) {
      var that = this
      console.log('下移', index, row)
      if (index + 1 === this.data.length) {
        alert('已经是最后一条，不可下移')
      } else {
        console.log(index)
        // const downDate = this.data[index + 1]
        // this.data.splice(index + 1, 1)
        // this.data.splice(index, 0, downDate)
        const currentRow = this.data[index]
        const nextRow = this.data[index + 1]

        for (const key in nextRow) {
          // key 属性名
          if (key !== 'id') {
            const v = nextRow[key] // value 属性值
            nextRow[key] = currentRow[key]
            currentRow[key] = v // 设置结果
          }
        }
      }
    },
    // 下移至底部
    moveDownLast(index, row) {
      console.log('下移至底部', index, row)
      if (index + 1 === this.data.length) {
        alert('已经是最后一条，不可下移')
      } else {
        for (var i = index; i + 1 < this.data.length; i++) {
          this.moveDown(i, row)
        }
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
.edit-input {
    .el-input__inner {
        border: 1px solid #e5e6e7;
    }
}
</style>
<style scoped>
::v-deep .inpu ::v-deep .input-with-select .el-input-group__prepend {
    background-color: #fff;
}
</style>
